<script setup>
import { ref } from 'vue'
import { renderSingleBar } from '@/assets/js/chartUtils'
import { formatStamp } from '@/assets/js/utils'
import {
    getAlarmRanking,
    getAllAlarmData,
    getDayMonthAlarm,
} from '@/assets/api/api'

// 告警统计
import alarmLineChart from '@/components/alarmLineChart.vue'
// 最新告警
import alarmNew from '@/components/alarmNew.vue'
// import { showLoading } from '@/assets/js/loading'
// 今日告警
const todayWarnBar = ref(null)
function getTodayAlarm() {
    const todayTime = [
        formatStamp(+new Date(), 'yyyy-MM-dd 00:00:00'),
        formatStamp(+new Date(), 'yyyy-MM-dd hh:ss:mm'),
    ]
    getAllAlarmData({
        type: '天',
        startTime: todayTime[0],
        endTime: todayTime[1],
        deviceClassify: 1,
    }).then((res) => {
        const chartData = res.data
        const xData = []
        const yData = []
        chartData.forEach((item) => {
            let time = Object.keys(item)[0]
            if (time.split('-').length < 2) {
                time = time + ':00'
            }
            const value = Object.values(item)[0]
            xData.push(time)
            yData.push(value)
        })
        renderSingleBar(todayWarnBar.value, {
            xData: xData,
            yData,
            yName: '告警数量',
        })
    })
}
const dayAlarmCount = ref(0)
const monthAlarmCount = ref(0)
function getDayMonthAlarmNum() {
    getDayMonthAlarm().then((res) => {
        dayAlarmCount.value = res.data.dayAlarmCount
        monthAlarmCount.value = res.data.monthAlarmCount
    })
}
const alarmRank = ref([])
function getData() {
    // showLoading()
    getAlarmRanking().then((res) => {
        alarmRank.value = res.data
    })
    getTodayAlarm()
    getDayMonthAlarmNum()
}
getData()
</script>
<template>
    <el-row :gutter="20">
        <el-col :span="8">
            <div class="dashboard-top-item white-box">
                <div class="top-item-content d-flex">
                    <div class="d-flex-1">
                        <h4>今日告警</h4>
                        <p class="num">{{ dayAlarmCount }}</p>
                    </div>
                    <div class="small-chart" ref="todayWarnBar"></div>
                </div>
                <div class="top-item-footer d-flex">
                    <div class="value-item mx-0">
                        <span class="d-flex-1">当月告警:</span>
                        <b>{{ monthAlarmCount }}</b>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="16">
            <alarmNew></alarmNew>
        </el-col>
    </el-row>

    <div class="white-box mt-20 d-flex d-flex-1 d-flex-top">
        <div class="d-flex-2" style="height: 100%">
            <alarmLineChart title="告警数量"></alarmLineChart>
        </div>
        <ul class="warn-rank">
            <h4 class="fw-b fs-16 mb-10">告警排名</h4>
            <li v-for="(item, index) in alarmRank" :key="index">
                <i class="no">{{ index + 1 }}</i>
                <p class="d-flex-1">{{ item.device_name }}</p>
                <span class="num">{{ item.count }}</span>
            </li>
            <el-empty description="暂无数据" v-if="alarmRank.length == 0" />
        </ul>
    </div>
</template>
<style lang="scss" scoped>
.chart-blk {
    height: 500px;
    width: 70%;
}
.warn-rank {
    width: 20%;
    padding-left: 30px;
    & > li {
        display: flex;
        align-items: center;
        padding: 10px 0;
    }
    .no {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background: #f00;
        border-radius: 5px;
        line-height: 20px;
        text-align: center;
        color: #fff;
    }
}
</style>
